<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>danceWeui框架</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="../../css/weui.min.css">
	<link rel="stylesheet" href="../../css/danceWeui.css">
</head>
<body class="body__bg">

<div class="daui-navbar bg-gradual-blue">
	<div class="daui-navbar__hd">
		<a href="javascript:history.back(-1)"><i class="iconfontzz icon-fanhuijiantou"></i>返回</a>
	</div>
	<div class="daui-navbar__bd">标签导航</div>
	<div class="daui-navbar__hd">
		<a href="../index.html"><i class="iconfontzz icon-home"></i></a>
	</div>
</div>

<div class="page__hd">
    <h1 class="page__hd_title">
        Tabsnav 标签导航
    </h1>
    <p class="page__hd_desc">导航需要加载iscroll-lite.js插件,这里使用的是精简版,源码未压缩可自行修改其他颜色</p>
</div>

<div class="page__bd">

	<div class="weui-cells__title">默认</div>
	<div class="daui-tabsnav">
		<div class="daui-tabsnav__item">网页</div>
		<div class="daui-tabsnav__item daui-tabsnav__item-on">资讯</div>
		<div class="daui-tabsnav__item">图片</div>
		<div class="daui-tabsnav__item">教育</div>
		<div class="daui-tabsnav__item">财经</div>
	</div>

    <div class="daui-gap"></div>
	<div class="weui-cells__title">平分</div>
	<div class="daui-tabsnav daui-tabsnav-flex">
		<div class="daui-tabsnav__item">关注</div>
		<div class="daui-tabsnav__item daui-tabsnav__item-on">推荐</div>
		<div class="daui-tabsnav__item">图片</div>
	</div>

    <div class="daui-gap"></div>
	<div class="weui-cells__title">自定义样式</div>
	<div class="daui-tabsnav daui-tabsnav-flex daui-tabsnav_success">
		<div class="daui-tabsnav__item">网页</div>
		<div class="daui-tabsnav__item daui-tabsnav__item-on">资讯</div>
		<div class="daui-tabsnav__item">图片</div>
		<div class="daui-tabsnav__item">教育</div>
		<div class="daui-tabsnav__item">财经</div>
	</div>

    <div class="daui-gap"></div>
	<div class="weui-cells__title">自定义样式</div>
	<div class="daui-tabsnav daui-tabsnav-flex daui-tabsnav_warning">
		<div class="daui-tabsnav__item">网页</div>
		<div class="daui-tabsnav__item daui-tabsnav__item-on">资讯</div>
		<div class="daui-tabsnav__item">图片</div>
		<div class="daui-tabsnav__item">教育</div>
		<div class="daui-tabsnav__item">财经</div>
	</div>

    <div class="daui-gap"></div>
	<div class="weui-cells__title">自定义样式</div>
	<div class="daui-tabsnav daui-tabsnav-flex daui-tabsnav_danger">
		<div class="daui-tabsnav__item">网页</div>
		<div class="daui-tabsnav__item daui-tabsnav__item-on">资讯</div>
		<div class="daui-tabsnav__item">图片</div>
		<div class="daui-tabsnav__item">教育</div>
		<div class="daui-tabsnav__item">财经</div>
	</div>

	<div class="weui-cells__title">JS控制及切换效果</div>
	<div class="daui-tabsnav daui-tabsnav-flex J_tabsnav">
		<div class="daui-tabsnav__item daui-tabsnav__item-on">网页</div>
		<div class="daui-tabsnav__item">资讯</div>
		<div class="daui-tabsnav__item">图片</div>
		<div class="daui-tabsnav__item">教育</div>
		<div class="daui-tabsnav__item">财经</div>
	</div>
	<div class="daui-tabsbd J_tabsbd">
		<div class="daui-tabsbd__item padding">网页<br>对应内容页<br>实现切换效果</div>
		<div class="daui-tabsbd__item padding">资讯<br>对应内容页<br>实现切换效果</div>
		<div class="daui-tabsbd__item padding">图片<br>对应内容页<br>实现切换效果</div>
		<div class="daui-tabsbd__item padding">教育<br>对应内容页<br>实现切换效果</div>
		<div class="daui-tabsbd__item padding">财经<br>对应内容页<br>实现切换效果</div>
	</div>

</div>

<div class="daui-gap daui-gap_transparent"></div>
<div class="daui-footer">
	<div class="daui-footer__links">
		<a class="daui-footer__links-item" href="../index.html">DanceWeUI首页</a>
		<a class="daui-footer__links-item" href="https://gitee.com/lianlianzan/danceui" target="_blank">去码云下载</a>
	</div>
	<div class="daui-footer__text">Copyright &copy; DanceUI</div>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/danceui-tab.js"></script>
<script src="../../../plugins/iscroll-lite/iscroll-lite.min.js"></script>
<script>
    $('.J_tabsnav').tab({
        defaultIndex: 3,
        activeClass: 'daui-tabsnav__item-on',
        tabsBd: '.J_tabsbd',
        onToggle: function (index) {
            console.log('index:'+index);
        }
    })
</script>
</body>
</html>